<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
    <title>Directives</title>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script>
        angular.module("exampleApp", [])
            .controller("defaultCtrl", function ($scope) {
                $scope.todos = [
                    { action: "Get groceries", complete: false },
                    { action: "Call plumber", complete: false },
                    { action: "Buy running shoes", complete: true },
                    { action: "Buy flowers", complete: false },
                    { action: "Call family", complete: false }];
            });
    </script>
    <style>
        .odd { background-color: lightcoral}
        .even { background-color: lavenderblush}
    </style>
</head>
<body>
    <div id="todoPanel" class="panel" ng-controller="defaultCtrl">
        <h3 class="panel-header">To Do List</h3>

        <table class="table">
            <tbody>
                <tr ng-repeat-start="item in todos">
                    <td>This is item {{$index}}</td>
                </tr>
                <tr>
                    <td>The action is: {{item.action}}</td>
                </tr>
                <tr ng-repeat-end>
                    <td>Item {{$index}} is {{$item.complete? '' : "not "}} complete</td>
                </tr>
            </tbody>
        </table>


    </div>
</body>
</html>
